// Vue 图片懒加载
export default (Vue: any, _options = {}) => {
  if (!Array.prototype.remove) {
    // eslint-disable-next-line no-extend-native
    Array.prototype.remove = function (item: any) {
      if (!this.length) return
      const index = this.indexOf(item)
      if (index > -1) {
        this.splice(index, 1)
        return this
      }
    }
  }
  const init = {
    lazyLoad: false,
    default:
      'https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png',
  }

  const listenList: any[] = []
  const imageCatcheList: any[] = []

  const isAlredyLoad = (imageSrc: any) => {
    if (imageCatcheList.includes(imageSrc)) {
      return true
    } else {
      return false
    }
  }
  // 检测图片是否可以加载，如果可以则进行加载
  const isCanShow = (item: { ele: any; src: any }) => {
    const ele = item.ele
    const src = item.src
    // 图片距离页面顶部的距离
    const top = ele.getBoundingClientRect().top
    // 页面可视区域的高度
    // top + 10 已经进入了可视区域10像素
    if (top + 10 < window.innerHeight) {
      const image = new Image()
      image.src = src
      image.onload = function () {
        ele.src = src
        imageCatcheList.push(src)
        listenList.remove(item)
      }
      return true
    } else {
      return false
    }
  }

  const onListenScroll = () => {
    window.addEventListener('scroll', function () {
      const length = listenList.length
      for (let i = 0; i < length; i++) {
        isCanShow(listenList[i])
      }
    })
  }
  // Vue 指令最终的方法
  const addListener = (ele: { src: string }, binding: { value: any }) => {
    // 绑定的图片地址
    const imageSrc = binding.value
    // 如果已经加载过，则无需重新加载，直接将src赋值
    if (isAlredyLoad(imageSrc)) {
      ele.src = imageSrc
      return false
    }
    const item = {
      ele,
      src: imageSrc,
    }
    // 图片显示默认的图片
    ele.src = init.default
    // 再看看是否可以显示此图片
    if (isCanShow(item)) {
      return
    }
    // 否则将图片地址和元素均放入监听的lisenList里
    listenList.push(item)

    // 然后开始监听页面scroll事件
    onListenScroll()
  }

  Vue.directive('lazyload', {
    inserted: addListener,
    updated: addListener,
  })
}

// 用法
// import LazyLoad from 'lazyLoad.js'
// Vue.use(LazyLoad);
// <img v-lazyload="imageSrc" >
